<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>学生信息管理系统</title>

    <link rel="stylesheet" href="lib/bootstrap.min.css">
    <link rel="stylesheet" href="lib/datepicker/skin/WdatePicker.css">
    <style>
        .info {
            margin-left: 20px;
        }
        
        .manger {
            margin-left: 20px;
        }
        
        #relogin {
            color: blue;
        }
        
        .all {
            width: 85%;
            margin: 0 auto;
        }
        
        #template {
            display: none;
        }
        
        #mask {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            background-color: rgba(0, 0, 0, .5);
            display: none;
        }
        
        #message {
            padding: 20px 50px;
            width: 600px;
            background-color: #fff;
            border-radius: 10px;
            transform: translate(-50%, -50%);
            position: fixed;
            top: 50%;
            left: 50%;
            display: none;
        }
        
        #message h2 {
            margin-bottom: 20px;
        }
        
        select {
            margin-top: 5px;
            height: 30px;
        }
        
        select:nth-of-type(1) {
            margin-left: 20px;
        }
        
        .form-group:nth-of-type(3) .radio-inline {
            margin-left: 20px;
        }
        
        .btn-primary,
        .btn-default {
            border: none;
            outline: none;
        }
    </style>

</head>

<body>
    <h2 class="info">学生信息管理系统</h2>
    <h4 class="manger">
        <span id="mangerName"></span>
        <span id="mangerType"></span>：您好
        <span id="relogin">[退出登录]</span>
    </h4>
    <hr>
    <div class="all">

        <button class="btn btn-primary" id="addStudent" style="float:right;">+ 新增学生</button>
        <table class="table">
            <thead>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>所在城市</th>
                    <th>入学时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody class="data-all">
                <tr id="template">
                    <td class="data-id"></td>
                    <td class="data-name"></td>
                    <td class="data-age"></td>
                    <td class="data-sex"></td>
                    <td class="data-city"></td>
                    <td class="data-joinDate"></td>
                    <td>
                        <button class="btn btn-primary data-edit">编辑</button>
                        <button class="btn btn-danger data-delete">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div id="mask"></div>
    <div id="message">
        <h2>添加学生</h2>

        <div class="form-horizontal">
            <div class="form-group">
                <label for="data-name" class="col-sm-2 control-label">学生姓名</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="data-name" placeholder="学生姓名">
                </div>
            </div>

            <div class="form-group">
                <label for="data-age" class="col-sm-2 control-label">年龄</label>
                <div class="col-sm-10">
                    <input type="number" class="form-control" id="data-age" placeholder="年龄">
                </div>
            </div>

            <div class="form-group">
                <label for="data-age" class="col-sm-2 control-label">性别</label>
                <label class="radio-inline">
				    <input type="radio" name="sex" id="data-man" checked>男
			    </label>
                <label class="radio-inline">
				    <input type="radio" name="sex" id="data-woman">女
			    </label>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">所在城市</label>
                <select name="" id="province"></select>
                <select name="" id="city"></select>
                <select name="" id="area"></select>
            </div>


            <div class="form-group">
                <label class="col-sm-2 control-label">入学日期</label>

                <div class="col-sm-10">
                    <input type="input" class="form-control" id="data-joinDate" onclick="WdatePicker()" placeholder="入学日期">
                </div>
            </div>

            <div class="form-group" style="float:right;margin-top:20px;">
                <button id="change" class="btn btn-primary" style="display: none;">确认修改</button>
                <button id="submit" class="btn btn-primary">确认添加</button>
                <button id="cancel" class="btn btn-default">取消</button>
            </div>
        </div>

    </div>
</body>

</html>
<!-- <script src="lib/echarts.min.js"></script> -->
<script src="lib/jquery.min.js"></script>
<script src="lib/citys.js"></script>
<script src="lib/datepicker/wdatepicker.js"></script>
<script src="lib/common.js"></script>
<script>
    // 登陆验证(这块最好找一下cookie的函数)
    let userInfo = sessionStorage.getItem("userInfo") || document.cookie.replace("userInfo="); //先判断session里边有没有东西，有就放在userInfo里面，若session里边没有东西，就上cookie里边去看，cookie有东西就会将东西放在userInfo里面；
    if (!userInfo) {
        location.href = `${address}/login.html`; //页面跳转，获取当前的地址栏，也可以让地址栏迅速做出改变
    }
    // 登陆验证结束

    // 展示用户信息和退出登录
    $("#mangerName").html(JSON.parse(userInfo)[0].realname);
    $("#mangerType").html(JSON.parse(userInfo)[0].usertype ? "老师" : "同学");

    $("#relogin").click(function() {
        sessionStorage.removeItem("userInfo");
        document.cookie = "userInfo=xxx;expires=" + new Date("1970-01-01");
        location.href = `${address}/login.html`;
    })

    // let address = "http://192.168.0.4:8080"; //家里的
    // let address = "http://10.35.170.201:8082"; //学校的
    let template = $("#template");

    // 删除请求
    template.find(".data-delete").click(function() {
        let nowItem = $(this).closest("tr");
        if (confirm(`确定要删除${nowItem.find(".data-name").html()}同学吗？此项操作不可逆！`)) {

            $.ajax({
                url: `${address}/deleteStudent`,
                data: {
                    id: $(this).closest("tr").find(".data-id").html()
                },
                success(data) {
                    if (data === "success") {
                        nowItem.fadeOut();
                    } else {
                        alert("删除失败");
                    }
                }
            })
        }
    })

    // 编辑请求
    template.find(".data-edit").click(function() {
        let editList = $(this).closest("tr"); //找到data-edit的祖先元素tr
        $("#mask").css("display", "block");
        $("#message").css("display", "block");
        $("#message").find("h2").html("编辑学生");
        $("#data-name").val(editList.find(".data-name").html())
        $("#data-age").val(editList.find(".data-age").html())
        $("#data-joinDate").val(editList.find(".data-joinDate").html());
        // city.val(editList.find(".data-city").html());
        // province.val(editList.find(".data-city").html());
        // area.val(editList.find(".data-city").html());

        if (editList.find(".data-sex").html() === "女") {
            $("#message").find("#data-woman").prop("checked", true)
        }
        if (editList.find(".data-sex").html() === "男") {
            $("#message").find("#data-man").prop("checked", true)
        }
        $("#submit").css("display", "none")
        $("#change").css("display", "inline-block")
        $("#change").click(function() {
            if ($("#data-name").val() && $("#data-age").val() && $("#data-joinDate")) {
                $.ajax({
                    url: `${address}/changeStudent`,
                    data: {
                        id: editList.find(".data-id").html(),
                        name: $("#message").find("#data-name").val(),
                        age: $("#data-age").val(),
                        sex: $("#data-woman")[0].checked ? 0 : 1,
                        city: $("#province").val() + $("#city").val() + $("#area").val(),
                        joinDate: $("#data-joinDate").val(),
                    },
                    success(data) {
                        if (data === "success") {
                            $("#mask").css("display", "none")
                            $("#message").css("display", "none")
                            history.go(0)
                        } else {
                            alert("更改失败");
                        }
                    }
                })
            }
        })
    })

    // 添加请求
    $("#submit").click(function() {
        if ($("#data-name").val() && $("#data-age").val() && $("#data-joinDate")) {

            $.ajax({
                url: `${address}/addStudent`,
                data: {
                    name: $("#data-name").val(),
                    age: $("#data-age").val(),
                    sex: $("#data-woman")[0].checked ? 0 : 1,
                    city: $("#province").val() + $("#city").val() + $("#area").val(),
                    joinDate: $("#data-joinDate").val(),
                },
                success(data) {
                    if (data === "success") {
                        history.go(0)
                    } else {
                        alert("操作失败")
                    }
                }
            })
        }
    })
    window.onkeydown = function(event) {
        if (event.keyCode === 13) {
            $("#submit").click();
        }
        if (event.keyCode === 27) {
            $("#cancel").click();
        }
    }

    // 新增学生显示弹出层
    $("#addStudent").click(function() {
        $("#mask").fadeIn();
        $("#message").fadeIn();
        $("#data-name").focus();
    })
    $("#cancel").click(function() {
        $("#mask").fadeOut("fast");
        $("#message").fadeOut("fast");
    })

    // $("#data-joinDate").click(function() {
    //     WdatePicker();
    // })

    $.ajax({
        url: `${address}/getStudentList`,
        success(data) {
            // console.log(data);
            let studentList = JSON.parse(data);
            let tbody = $(".data-all");
            studentList.forEach(item => {
                let newItem = template.clone(true).attr("id", "");
                newItem.find(".data-id").html(item.id);
                newItem.find(".data-name").html(item.name);
                newItem.find(".data-age").html(item.age);
                newItem.find(".data-sex").html(item.sex == "1" ? "男" : "女");
                newItem.find(".data-city").html(item.city);
                newItem.find(".data-joinDate").html(item.joinDate);
                newItem.appendTo(tbody);
            })
        }
    })
</script>